<template>
  <div class="user-home">
    <!-- 顶部导航 -->
    <el-header class="header">
      <div class="header-content">
        <div class="logo">
          <h2>🏃‍♂️ 健身活动预约系统</h2>
        </div>
        <div class="nav">
          <el-button @click="$router.push('/user/activities')" type="primary">活动列表</el-button>
          <el-button @click="$router.push('/user/coaches')">教练团队</el-button>
          <el-button @click="$router.push('/user/venues')">场地设施</el-button>
          <el-button @click="$router.push('/user/bookings')">我的预约</el-button>
          <el-button @click="$router.push('/user/profile')">个人中心</el-button>
          <el-button @click="logout" type="danger">退出登录</el-button>
        </div>
      </div>
    </el-header>
    <!-- 主要内容 -->
    <el-main class="main-content">
      <!-- 轮播图 -->
      <el-carousel height="300px" class="banner">
        <el-carousel-item v-for="item in banners" :key="item.id">
          <div class="banner-item" :style="{ backgroundImage: `url(${item.image})` }">
            <div class="banner-content">
              <h3>{{ item.title }}</h3>
              <p>{{ item.description }}</p>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>

      <!-- 热门活动 -->
      <div class="section">
        <h2 class="section-title">🔥 热门活动</h2>
        <el-row :gutter="20">
          <el-col :span="6" v-for="activity in hotActivities" :key="activity.id">
            <el-card class="activity-card" @click="viewActivity(activity.id)">
              <div class="activity-image">
                <img :src="getActivityImage(activity.title)" :alt="activity.title">
              </div>
              <div class="activity-info">
                <h3>{{ activity.title }}</h3>
                <p class="location">📍 {{ activity.location }}</p>
                <p class="time">🕐 {{ formatTime(activity.startTime) }}</p>
                <p class="price">💰 ¥{{ activity.price }}</p>
                <p class="participants">👥 {{ activity.currentParticipants }}/{{ activity.maxParticipants }}</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 活动分类 -->
      <div class="section">
        <h2 class="section-title">📋 活动分类</h2>
        <el-row :gutter="20">
          <el-col :span="6" v-for="category in categories" :key="category.id">
            <el-card class="category-card" @click="filterByCategory(category.type)">
              <div class="category-icon">{{ category.icon }}</div>
              <h3>{{ category.name }}</h3>
              <p>{{ category.description }}</p>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 最新活动 -->
      <div class="section">
        <h2 class="section-title">🆕 最新活动</h2>
        <el-table :data="latestActivities" style="width: 100%">
          <el-table-column prop="title" label="活动名称" width="200" />
          <el-table-column prop="location" label="地点" width="150" />
          <el-table-column prop="startTime" label="开始时间" width="180">
            <template #default="scope">
              {{ formatTime(scope.row.startTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="price" label="价格" width="100">
            <template #default="scope">
              ¥{{ scope.row.price }}
            </template>
          </el-table-column>
          <el-table-column prop="currentParticipants" label="参与人数" width="120">
            <template #default="scope">
              {{ scope.row.currentParticipants }}/{{ scope.row.maxParticipants }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button size="small" @click="viewActivity(scope.row.id)">查看详情</el-button>
              <el-button size="small" type="primary" @click="bookActivity(scope.row)">立即预约</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { activityApi } from '@/api'
import dayjs from 'dayjs'

const router = useRouter()

// 响应式数据
const hotActivities = ref([])
const latestActivities = ref([])

// 轮播图数据
const banners = ref([
  {
    id: 1,
    title: '专业健身指导',
    description: '专业教练一对一指导，科学健身更有效',
    image: '/images/banner1.jpg'
  },
  {
    id: 2,
    title: '多样化课程',
    description: '瑜伽、力量训练、有氧运动，满足不同需求',
    image: '/images/banner2.jpg'
  },
  {
    id: 3,
    title: '便捷预约系统',
    description: '在线预约，随时随地安排你的健身计划',
    image: '/images/banner3.jpg'
  }
])

// 活动分类
const categories = ref([
  {
    id: 1,
    name: '瑜伽课程',
    type: 'yoga',
    icon: '🧘‍♀️',
    description: '放松身心，提升柔韧性'
  },
  {
    id: 2,
    name: '力量训练',
    type: 'strength',
    icon: '💪',
    description: '增强肌肉力量'
  },
  {
    id: 3,
    name: '有氧运动',
    type: 'cardio',
    icon: '🏃‍♂️',
    description: '燃烧脂肪，提升心肺功能'
  },
  {
    id: 4,
    name: '游泳教学',
    type: 'swimming',
    icon: '🏊‍♂️',
    description: '专业游泳指导'
  }
])

// 方法
const loadHotActivities = async () => {
  try {
    const res = await activityApi.getHotActivities()
    hotActivities.value = res.data.activities || []
  } catch (error) {
    console.error('加载热门活动失败:', error)
  }
}

const loadLatestActivities = async () => {
  try {
    const res = await activityApi.getActivityList({ current: 1, size: 10 })
    latestActivities.value = res.data.activities || []
  } catch (error) {
    console.error('加载最新活动失败:', error)
  }
}

const viewActivity = (id) => {
  router.push(`/user/activity/${id}`)
}

const bookActivity = (activity) => {
  router.push(`/user/booking/create?activityId=${activity.id}`)
}

const filterByCategory = (type) => {
  router.push(`/user/activities?category=${type}`)
}

const logout = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('userInfo')
  ElMessage.success('退出登录成功')
  router.push('/login')
}

const formatTime = (time) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm')
}

const getActivityImage = (title) => {
  // 根据活动名称返回对应的图片
  const imageMap = {
    '瑜伽': '/images/yoga.jpg',
    '力量': '/images/strength.jpg',
    '有氧': '/images/cardio.jpg',
    '游泳': '/images/swimming.jpg',
    '拳击': '/images/boxing.jpg'
  }
  
  for (const [key, image] of Object.entries(imageMap)) {
    if (title.includes(key)) {
      return image
    }
  }
  return '/images/default.jpg'
}

// 生命周期
onMounted(() => {
  loadHotActivities()
  loadLatestActivities()
})
</script>

<style scoped>
.user-home {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e0e0e0;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.logo h2 {
  margin: 0;
  color: #333;
}

.nav .el-button {
  margin-left: 10px;
}

.main-content {
  padding: 20px;
}

.banner {
  margin-bottom: 40px;
  border-radius: 10px;
  overflow: hidden;
}

.banner-item {
  height: 100%;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
}

.banner-content h3 {
  font-size: 2.5em;
  margin-bottom: 10px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.banner-content p {
  font-size: 1.2em;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.section {
  margin-bottom: 40px;
  background: white;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.section-title {
  margin-bottom: 20px;
  color: #333;
  font-size: 1.8em;
  border-left: 4px solid #667eea;
  padding-left: 15px;
}

.activity-card {
  cursor: pointer;
  transition: transform 0.3s ease;
  margin-bottom: 20px;
}

.activity-card:hover {
  transform: translateY(-5px);
}

.activity-image img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
}

.activity-info h3 {
  margin: 10px 0;
  color: #333;
}

.activity-info p {
  margin: 5px 0;
  color: #666;
  font-size: 14px;
}

.category-card {
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s ease;
  margin-bottom: 20px;
}

.category-card:hover {
  transform: translateY(-5px);
}

.category-icon {
  font-size: 3em;
  margin-bottom: 10px;
}

.category-card h3 {
  margin: 10px 0;
  color: #333;
}

.category-card p {
  color: #666;
  font-size: 14px;
}
</style> 